var option = "",
    charts1 = "",
    LineData = "";
getLineData(); // 获取数据

function getLineData() {
    $.ajax({
        url: "http://188.131.167.236:9000/getGameStats", //json文件位置
        type: "GET", //请求方式为get
        dataType: "json", //返回数据格式为json
        success: function(result) { //请求成功完成后要执行的方法
            if (!result) return;
            LineData = splitData(result); //数据处理
            getLine();
        }
    })
}
//数组处理
function splitData(rawData) {
    var datas1 = [],
        datas2 = [],
        datas3 = [],
        datas4 = [],
        datas5 = [],
        datas6 = [];
    var times = [];
    for (var i = 0; i < rawData.length; i++) {
        datas1.push(rawData[i].pubg);
        datas2.push(rawData[i].csgo);
        datas3.push(rawData[i].dota2);
        datas4.push(rawData[i].gtav);
        datas5.push(rawData[i].r6);
        datas6.push(rawData[i].mhw);
        times.push(rawData[i].week);
    }
    return {
        datas1: datas1, //第一条曲线
        datas2: datas2, //第二条曲线
        datas3: datas3, //第三条曲线
        datas4: datas4, //第四条曲线
        datas5: datas5, //第五条曲线
        datas6: datas6, //第六条曲线
        times: times, //时间
    };
}

function getLine() {
    option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        color:['#7b404c','#b5d632','#61a0a8','#d48265','#d454b8','#e4d73f'],
        legend: {
            data: ['PUBG', 'CSGO', 'Dota 2',"GTAV","R6","MHW"],
            textStyle:{
                color:'#ffffff',
            }

        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            axisLabel: {
                textStyle: {
                    color: '#fff'
                },
                formatter : function(params){
                    var newParamsName = "";// 最终拼接成的字符串
                    var paramsNameNumber = params.length;// 实际标签的个数
                    var provideNumber = 9;// 每行能显示的字的个数
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                    /**
                     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                     */
                    // 条件等同于rowNumber>1
                    if (paramsNameNumber > provideNumber) {
                        /** 循环每一行,p表示行 */
                        for (var p = 0; p < rowNumber; p++) {
                            var tempStr = "";// 表示每一次截取的字符串
                            var start = p * provideNumber;// 开始截取的位置
                            var end = start + provideNumber;// 结束截取的位置
                            // 此处特殊处理最后一行的索引值
                            if (p == rowNumber - 1) {
                                // 最后一次不换行
                                tempStr = params.substring(start, paramsNameNumber);
                            } else {
                                // 每一次拼接字符串并换行
                                tempStr = params.substring(start, end) + "\n";
                            }
                            newParamsName += tempStr;// 最终拼成的字符串
                        }

                    } else {
                        // 将旧标签的值赋给新标签
                        newParamsName = params;
                    }
                    //将最终的字符串返回
                    return newParamsName
                }

            },
            boundaryGap: ['5%', '5%'],
            type: 'category',
            data: LineData.times,
            axisLine: {
                lineStyle: {
                    color: "#fff",
                    width: '2',
                    type: 'soild'
                },



            }
        },
        yAxis: {
            name: "人数",
            type: 'value',
            axisLabel: {
                formatter: '{value} 人'
            },
            axisLine: {
                lineStyle: {
                    color: "#fff",
                    width: '2',
                    type: 'soild'
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                    }
                }
            }
        },
        series: [{
            name: 'PUBG',
            type: 'line',
            stack: '总量1',
            data: LineData.datas1
        },
            {
                name: 'CSGO',
                type: 'line',
                stack: '总量2',
                data: LineData.datas2,
                lineStyle: {
                    color: "#b5d632" //折线的颜色
                }
            },
            {
                name: 'Dota 2',
                type: 'line',
                stack: '总量3',
                data: LineData.datas3
            },
            {
                name: 'GTAV',
                type: 'line',
                stack: '总量4',
                data: LineData.datas4
            },
            {
                name: 'R6',
                type: 'line',
                stack: '总量5',
                data: LineData.datas5,
                lineStyle:{
                    color: "#d454b8"
                }
            },
            {
                name: 'MHW',
                type: 'line',
                stack: '总量6',
                data: LineData.datas6,
                lineStyle:{
                    color: "#e4d73f"
                }
            },
        ]
    };
    //初始化echarts实例
    charts1 = echarts.init(document.getElementById('charts1'));
    // 使用制定的配置项和数据显示图表
    charts1.setOption(option);
}
